<template>
    <div>
        <div class="bg-white border-rad-5">
            <div class="flex justify-start mar-t-10 mar-x-20">
                <Tabs :currentTab="currentTab" :tabs="tabs" />
            </div>

			<Lines h="1px" w="100%" bg="#E6E8EB" />

            <div class="pad-y-15 font-14 flex align-center flex-wrap">
                <div :class="'flex align-center article-status ' + (item.isSelected ? 'color-1e80ff' : 'color-8a919f')"
                    v-for="(item, index) in articleStatus"
                    :key="index"
                    @click="changeArticleStatus(item)"
                >
                    <span class="mar-x-1r text-nowrap">{{ item.name }}（{{ item.total }}） </span>
                    <Lines v-if="index < articleStatus.length - 1" h="26px" w="1px" bg="#E6E8EB" />
                </div>
            </div>

            <div v-if="loading" class="mar-t-15 mar-x-20">
                <el-skeleton :rows="4" animated />
            </div>

            <div v-else-if="!loading && articleList.length > 0"
                v-for="(item, index) in articleList"
                :key="index"
            >
                <div class="content pad-20 font-16">
                    <div class="flex justify-between align-center scroll-row">
                        <div class="flex align-center w-90" >
                            <div class="mar-r-10 font-16 ellipsis w-auto">{{ item.title }}</div>
                            
                            <div
                                :style="{
                                    textWrap: 'nowrap',
                                    padding: '3px 10px',
                                    border: `1px ${getStateTagBgColor(item.state).color} solid`,
                                    borderRadius: '3px',
                                    fontSize: '12px',
                                    color: getStateTagBgColor(item.state).color,
                                }"
                            >
                                {{ getStateTagBgColor(item.state).name }}
                            </div>
                        </div>

                        <div>
                            <el-dropdown @command="handleCommand($event, item)">
                                <span class="cur-pointer hoverClass font-26">...</span>
                                <el-dropdown-menu slot="dropdown" class="text-nowrap">
                                    <el-dropdown-item command="revokeArticle" v-if="item.state === 3">撤销文章</el-dropdown-item>
                                    <el-dropdown-item command="editArticle" v-if="item.state === 0 || item.state === 4">编辑</el-dropdown-item>
                                    <el-dropdown-item command="delArticle" v-if="item.state === 0 || item.state === 2 || item.state === 4">删除</el-dropdown-item>
                                    <el-dropdown-item command="applyPublish" v-if="item.state === 0">申请发布</el-dropdown-item>
                                    <el-dropdown-item command="revokeExamine" v-if="item.state === 1">撤回审核</el-dropdown-item>
                                    <el-dropdown-item command="publishArticle" v-if="item.state === 2">发布</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>

                    <div>
                        <span class="font-14 color-86909c">{{ item.createTime }}</span>
                    </div>
                </div>

                <Lines h="1px" w="atuo" bg="#E6E8EB" class="mar-x-25"/>
            </div>

            <div v-else-if="articleList.length === 0" class="mar-t-30 mar-x-20">
                <div class=" flex flex-column align-center">
                    <el-empty :image-size="130" description="暂无文章"></el-empty>

                    <div class="creating" @click="startCreating">
                        <span>开始创作</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Lines from '@/components/Lines/index'
    import Utils from '@/utils/utils'
	import Tabs from '@/components/Tabs/index'

    import { mapState } from 'vuex'
    import { getUserArticleList, getArticleStateCount, applyPublish, delArticle, publishArticle, revokeExamine, revokeArticle } from '@/apis/article'

    export default {
        components: {
            Lines,
            Tabs,
        },

        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo, // 用户信息
                token: state => state.user.token, // token
            }
            ),
            // 获取标签和背景颜色
            getStateTagBgColor() {
                return (state) => {
                    let color = ''
                    let name = ''

                    switch (state) {
                        case 0:
                            color = '#999999'
                            name = '草稿'
                            break;
                        case 1:
                            color = '#E6A23C'
                            name = '待审核'
                            break;
                        case 2:
                            color = '#146706'
                            name = '审核通过'
                            break;
                        case 3:
                            color = '#1e9fff'
                            name = '已发布'
                            break;
                        case 4:
                            color =  '#F56C6C'
                            name = '审核拒绝'
                            break;

                        case 5:
                            color = '#C45656'
                            name = '已下架'
                            break;
                    }

                    return {
                        color,
                        name
                    }
                }
            },
        },

        data() {
            return {
                pageLoading: false, // 页面加载控制
                loading: false, // 加载中
                currentTab: 1, // 当前tab
                state: null, // 当前用户文章状态：0 草稿，1 待审核，2 审核通过，3 已发布，4 审核拒绝
                articleList: [], // 文章列表
                // 管理标签
                tabs: [
                    { id: 1, name: '文章', isSelected: true },
                ],

                // 文章状态
                articleStatus: [
                    { id: 1, name: '全部', isSelected: true, state: null, total: 0 },
                    { id: 2, name: '草稿', isSelected: false, state: 0, total: 0 },
                    { id: 3, name: '待审核', isSelected: false, state: 1, total: 0 },
                    { id: 4, name: '审核通过', isSelected: false, state: 2, total: 0 },
                    { id: 5, name: '已发布', isSelected: false, state: 3, total: 0 },
                    { id: 6, name: '审核拒绝', isSelected: false, state: 4, total: 0 },
                    { id: 7, name: '已下架', isSelected: false, state: 5, total: 0 },
                ],
            }
        },

        mounted() {
            this.findUserArticleList()
            this.findArticleStateCount()
        },

        methods: {
            // 下拉框操作
            handleCommand(command, item) {
                switch (command) {
                    case 'applyPublish':
                        this.applyPublish(item)
                        break;
                    case 'delArticle':
                        this.delArticle(item)
                        break;
                    case 'editArticle':
                        this.editArticle(item)
                        break;
                    case 'publishArticle':
                        this.publishArticle(item)
                        break;
                    case 'revokeExamine':
                        this.revokeExamine(item)
                        break;
                    case 'revokeArticle':
                        this.revokeArticle(item)
                        break;
                }
            },
            // 发布文章回调
            applyPublish(item) {
				this.pageLoading = Utils.loading('申请发布中...')
				let params = {
					articleId: item.articleId,
					state: 0,
				}
				
				applyPublish(params).then(res => { 
					this.pageLoading.close()
					if (res.code === 200) { 
						Utils.popUpMsg('success', '申请发布成功！', 1500)
                        this.findUserArticleList()
                        this.findArticleStateCount()
					} else {
						Utils.popUpMsg('error', res.msg, 3000)
					}
				}).catch(err => { 
					this.pageLoading.close()
				})
            },

             // 删除文章回调
            delArticle(item) {
                Utils.confirmPopUpMsg('warning', '是否删除该文章？', '删除文章', () => {
                    this.pageLoading = Utils.loading('文章删除中...')
                    let params = {
                        articleId: item.articleId,
                    }
                    
                    delArticle(params).then(res => { 
                        this.pageLoading.close()
                        if (res.code === 200) { 
                            Utils.popUpMsg('success', '文章删除成功！', 1500)
                            this.findUserArticleList()
                            this.findArticleStateCount()
                        }
                    }).catch(err => { 
                        this.pageLoading.close()
                    })
                }, () => {
                    console.log('取消删除文章！')
                })
            },

            // 编辑文章回调
            editArticle(item) {
                this.$router.push({
                    path: '/startCreating',
                    query: { articleId: item.articleId }
                })
            },

            // 发布文章回调
            publishArticle(item) {
                this.pageLoading = Utils.loading('文章发布中...')
                let data = {
                    articleId: item.articleId,
                    state: 2,
                }

                publishArticle(data).then(res => { 
                    this.pageLoading.close()
                    if (res.code === 200) {
                        Utils.popUpMsg('success', '文章发布成功！', 1500)
                        this.findUserArticleList()
                        this.findArticleStateCount()
                    } else {
                        Utils.popUpMsg('error', res.msg, 3000)
                    }
                }).catch(err => { 
                    this.pageLoading.close()
                })
            },

            // 撤销审核回调
            revokeExamine(item) {
                this.pageLoading = Utils.loading('撤销审核中...')
                let params = {
                    articleId: item.articleId,
                    state: 1,
                }

                revokeExamine(params).then(res => {
                    this.pageLoading.close()
                    if (res.code === 200) { 
                        Utils.popUpMsg('success', '撤销审核成功！', 1500)
                        this.findUserArticleList()
                        this.findArticleStateCount()
                    } else {
                        Utils.popUpMsg('error', res.msg, 3000)
                    }
                }).catch(err => { 
                    this.pageLoading.close()
                })
            },

            // 撤销文章回调
            revokeArticle(item) {
                this.pageLoading = Utils.loading('撤销文章中...')
                let params = {
                    articleId: item.articleId,
                    state: 3,
                }

                revokeArticle(params).then(res => {
                    this.pageLoading.close()
                    if (res.code === 200) { 
                        Utils.popUpMsg('success', '撤销文章成功！', 1500)
                        this.findUserArticleList()
                        this.findArticleStateCount()
                    } else {
                        Utils.popUpMsg('error', res.msg, 3000)
                    }
                }).catch(err => { 
                    this.pageLoading.close()
                })
            },

            // 进入开始创作界面
            startCreating() {
                this.$router.push({
                    path: '/startCreating'
                })
            },

            // 获取用户各个状态文章数量
            findArticleStateCount () {
                getArticleStateCount().then(res => {
                    if (res.code === 200) {
                        this.articleStatus.forEach(item => {
                            const matched = res.data.find(d => d.state == item.state)
                            item.total = matched ? matched.total : 0
                            res.data.forEach(j => {
                                if(item.id === 1){
                                    item.total += j.total
                                }
                            })
                        })
                    }
                }).catch(err => {
                })
            },

            // 查询用户文章列表
            findUserArticleList() {
                let params = {
                    state: this.articleStatus.state,
                    pageSize: 10,
                    currentPage: 1
                }
                this.loading = true
                getUserArticleList(params).then(res => {
                    this.loading = false
                    if(res.code === 200) {
                        this.articleList = res.data.rows
                    }
                }).catch(err => {
                    this.loading = false
                })
            },

            // 切换文章状态
            changeArticleStatus(row) {
                this.articleStatus.forEach(item => {
                    item.isSelected = false

                    if (item.name === row.name) {
                        item.isSelected = true

                        this.articleStatus.state = row.state
                        this.findUserArticleList()
                    }
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    .tabs {
        display: flex;
        flex-direction: column;
        font-size: 16px;
        align-items: center;
        margin-right: 40px;
    }

    .article-status:hover{
        cursor: pointer;
        color: #1e80ff;
    }

    .creating {
        width: 100px;
        border-radius: 5px;
        background-color: #f4f9ff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
        color: #1e80ff;
        border: 1px solid #b3d5ff;
    }

    .creating:hover {
        cursor: pointer;
        background-color: #e8f2ff;
    }

    .more:hover {
        color: #1E80FF;
        background-color: #e5e6eb;
        border-radius: 5px;
    }
</style>